<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">开业管理</el-breadcrumb-item>
        <el-breadcrumb-item>开业申请</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <!-- 门店信息 -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button>
    </div>
    <store-info :const-code="detailData.constCode" style="margin-top:20px" />
    <div v-loading="dataLoading">
      <div class="qup-title-box"><span class="border" /><span>开业推广明细</span></div>
      <el-form
        ref="refForm"
        :rules="formRules"
        :model="formData"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="开业广告支持金额:" prop="advertAmount">
              <el-input v-model.number="formData.advertAmount">
                <span slot="suffix">元</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开业广告支持金额范围:" prop="advertAmountRange">
              <el-select
                v-model="formData.advertAmountRange"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in amountRangeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划开业活动开始日期:" prop="planActivityStartTime">
              <el-date-picker
                v-model="formData.planActivityStartTime"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="计划开业活动截止日期:" prop="planActivityEndTime">
              <el-date-picker
                v-model="formData.planActivityEndTime"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="活动主题:" prop="activityTheme">
              <el-input v-model="formData.activityTheme" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 附件上传 -->
      <div
        v-for="item in fileTypeList"
        :key="item.id"
      >
        <div class="qup-title-box"><span class="border" /><span>附件上传-{{ item.attachmentType }}</span></div>
        <import-file
          :data="item.fileList"
          :config-attachment-id="item.id||''"
          :limit="20"
          :file-type="item.fileType"
          @remove="removeFile"
          @upload-success="uploadSuccessFile"
        />
      </div>
    </div>
  </div>
</template>
<script>
import importFile from '@/components/importFile'
import { getShopAttachment } from '@/api/common.js'
import { getDetailById, saveOpenState, postConfigAttachmentTemplate } from '@/api/shopOpenManage'
import { getDictByPatchType } from '@/api/dataDict'
import BackPageMixin from '@/mixins/backPage'
import StoreInfo from './storeInfo.vue'
export default {
  name: 'OpenApply',
  components: { StoreInfo, importFile },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      id: '',
      dataLoading: false,
      saveLoading: false,
      formRules: {
        advertAmount: [
          { required: true, message: '请填写开业广告支持金额', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        advertAmountRange: [
          { required: true, message: '请选择开业广告支持金额范围', trigger: 'change' }
        ],
        planActivityStartTime: [
          { required: true, message: '请选择计划开业活动开始日期', trigger: 'change' }
        ],
        planActivityEndTime: [
          { required: true, message: '请选择计划开业活动截止日期', trigger: 'change' }
        ],
        activityTheme: [
          { required: true, message: '请输入主题活动', trigger: 'change' }
        ]

      },
      fileTypeList: [],
      detailData: {},
      amountRangeOptions: [], // 开业广告支持金额
      formData: {
        id: '',
        constCode: '',
        schedule: '',
        advertAmount: 0,
        advertAmountRange: '',
        planActivityStartTime: '',
        planActivityEndTime: '',
        activityTheme: ''
      }
    }
  },
  async  created() {
    this.id = this.$route.query.id
    this.dataLoading = true
    await postConfigAttachmentTemplate().then(res => {
      if (res.success === 1) {
        // 根据modelId获取每个配置id
        this.fileTypeList = res.data.records.filter(el => el.enable === 1 && el.attachmentType === 'DM单正反面图片' || el.attachmentType === '活动方案' || el.attachmentType === '活动推进表')
        this.fileTypeList.forEach(row => {
          this.$set(row, 'fileList', [])
        })
      }
    })
    if (this.id) {
      this.getFiles()// 获取文件，图片列表
      this.formData.id = this.id
      getDetailById(this.id).then(res => {
        if (res.success === 1) {
          this.detailData = res.data
          const { id, constCode, schedule, advertAmount, advertAmountRange, planActivityStartTime, planActivityEndTime, activityTheme } = res.data
          this.formData = { id, constCode, schedule, advertAmount, advertAmountRange, planActivityStartTime, planActivityEndTime, activityTheme }
          // this.formData.constCode = res.data.constCode
          // this.formData.schedule = res.data.schedule
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })
    }
    this.getDictByPatchTypeAll()
  },
  methods: {
    removeFile({ list }) {
    },
    uploadSuccessFile({ list }) {
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.fileTypeList.forEach(row => {
          row.fileList = res.data.filter(i => i.configAttachmentId === row.id)
        })
      })
    },
    async getDictByPatchTypeAll() {
      const { ADVERT_AMOUNT_RANGE } =
       await getDictByPatchType(['ADVERT_AMOUNT_RANGE'])
      this.amountRangeOptions = ADVERT_AMOUNT_RANGE
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.$set(this.formData, 'shopAttachmentDTOList', [])
          this.fileTypeList.forEach(row => {
            this.formData.shopAttachmentDTOList.push(...row.fileList)
          })
          saveOpenState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')// 返回列表页
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
